<template>
    <div>
        <nav class="BreadcrumbBlock">
			<div class="flex">
				<div class="BreadItem" @click="$router.push('/myStand')">我的</div>
				<div class="BreadItem active">后台管理中心</div>
			</div>
		</nav>
        <main class="adminMainBox flex">
            <aside class="adminMenu">
                <h4 class="">后台管理中心</h4>
                <menu class="adminMenuData">
                    <!-- <el-menu
                        default-active="/admin/brandMan"
                        class="el-menu-vertical-demo"
                        @select="selectMenu"
                        @open="handleOpen"
                        @close="handleClose">
                        <el-submenu index="">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>首页</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="/admin/brandMan">品牌规范</el-menu-item>
                                <el-menu-item index="/admin/experienceMan">体验规范</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-menu-item index="/admin/member">
                            <i class="el-icon-menu"></i>
                            <span slot="title">成员管理</span>
                        </el-menu-item>
                    </el-menu> -->
                    <ul class="menuBox">
                        <li class="">
                            <div class="flex align-center relative" :class="{'active':adminActiveMenu==1}">
                                <img v-if="adminActiveMenu==1||adminActiveMenu==101||adminActiveMenu==102" src="../assets/images/back/houtai_sel_home.png" alt="">
                                <img v-else src="../assets/images/back/houtai_nor_home.png" alt="">
                                <span :class="{'activeWrap':adminActiveMenu==101||adminActiveMenu==102}" @click="adminActiveMenu=101;$store.commit('SET_ADMIN_ACTIVE_MENU',101);$router.push('/admin/brandMan')">首页</span>
                                <i :class="{'el-icon-arrow-down':showSubMenuFlag,'el-icon-arrow-up':!showSubMenuFlag}" @click="showSubMenuFlag=!showSubMenuFlag"></i>
                            </div>
                            <ul class="subMenuBox" v-show="showSubMenuFlag">
                                <li>
                                    <div class="flex align-center" :class="{'active':adminActiveMenu==101}" @click="adminActiveMenu=101;$store.commit('SET_ADMIN_ACTIVE_MENU',101);$router.push('/admin/brandMan')">
                                        <span>品牌规范</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="flex align-center" :class="{'active':adminActiveMenu==102}" @click="adminActiveMenu=102;$store.commit('SET_ADMIN_ACTIVE_MENU',102);$router.push('/admin/experienceMan')">
                                        <span>体验规范</span>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class="flex align-center relative" :class="{'active':adminActiveMenu==2}" @click="adminActiveMenu=2;$store.commit('SET_ADMIN_ACTIVE_MENU',2);$router.push('/admin/member')">
                                <img v-if="adminActiveMenu==2" src="../assets/images/back/houtai_sel_person.png" alt="">
                                <img v-else src="../assets/images/back/houtai_nor_person.png" alt="">
                                <span>成员管理</span>
                            </div>
                        </li>
                    </ul>
                </menu>
            </aside>
            <article class="adminContent flex-1">
                <router-view></router-view>
            </article>
        </main>
    </div>
</template>
<script>
export default {
    name:'adminIndex',
    data(){
        return{
            adminActiveMenu:101,
            showSubMenuFlag:true
        }
    },
    mounted(){
        this.adminActiveMenu = this.$store.state.adminActiveMenu
    },
    methods: {
        // selectMenu(key, keyPath){
        //     console.log(key);
        //     this.$router.push(key);
        // },
        // handleOpen(key, keyPath) {
        //     console.log(key, keyPath);
        // },
        // handleClose(key, keyPath) {
        //     console.log(key, keyPath);
        // }
    }
}
</script>

<style scoped lang='less'>
// /deep/ .el-menu-item.is-active{
//     color: #0064FF;
//     background: #F4F5F8;
// }
// /deep/ .el-submenu .el-menu-item{
//     padding: 0 40px 0 86px !important;
// }
.adminMainBox{
    background: #FFFFFF;
    box-shadow: 0 -5px 20px 0 rgba(0,0,0,0.05);
    min-height: 74vh;
    // min-width: 1280px;

    .adminMenu{
        width: 270px;
        min-height: 74vh;
        border-right: 1px solid #E3E3E3;
        padding-top: 40px;
        box-sizing: border-box;
        overflow-y: auto;
        >h4{
            margin-left: 40px;
            margin-bottom: 20px;
            font-size: 20px;
            font-weight: 500;
            color: #000000;
            letter-spacing: 0;
            line-height: 30px;

        }
        .adminMenuData{
            .menuBox li div{
                min-height: 52px;
                font-size: 16px;
                color: rgba(0,0,0,0.95);
                cursor: pointer;
                // font-weight: 500;
                img{
                    margin-right: 17px;
                }
                i{
                    position: absolute;
                    right: 40px;
                }
            }
            .menuBox li div span.activeWrap{
                color: #0064FF !important;
                font-weight: 500;
            }
            .menuBox li div.active{
                background: #F4F5F8;
                color: #0064FF;
                font-weight: 500;
            }
            // .menuBox li div:hover{
            //     background: #F4F5F8;
            // }
            // .menuBox li div:hover span{
            //     color: #0064FF;
            // }
            .menuBox >li>div{
                padding: 0 40px;
            }
            .subMenuBox div{
                padding: 0 40px 0 86px;
            }
        }
        
        // /deep/ .el-menu{
        //     border-right: none;
        // }
    }
    .adminContent{
        padding: 30px 28px;
    }
}
</style>